<template>
		<div class="website-contact">
			<img src="./assets/bg2.jpg" class="bg"/>
			<div class="header">
				<img src="./assets/phone-logo.png" class="logoImg">
				<ul class="nav">
						<li class="nav-text"><router-link to="/">首页</router-link></li>
						<li class="nav-text"><router-link to="/about-us" >关于我们</router-link></li>
						<li class="nav-text"><router-link to="/contact-us" class="hover">联系我们</router-link></li>
				</ul>
			</div> 
			<div class="content">
				<img src="./assets/contact.png" class="imgtitle">
				<ul class="info"> 
					<li class="info-item">
						<p class="title">商务合作QQ</p>
						<p class="text">2904462830</p>
					</li>
					<li class="info-item">
						<p class="title">官方微信</p>
						<p class="text">lianlianjiang01</p>
					</li>
					<li class="info-item">
						<p class="title">官方公众号</p>
						<p class="text">拾恋TA会跟你讲</p>
					</li>
				</ul>
			</div>
		</div>
	</template>
	<script>
	
	</script>
	<style scoped type="text/css">
	.website-contact {
		& .bg {
			position: absolute;
			width: 100vw;
			height: 100vh;
		}

		& .header {
			position: absolute;
			z-index: 99;
			width: 11.20rem;
			height: 0.56rem;
			top: 0.38rem;
			left: 50%;
			margin-left: -5.5rem;
			display: flex;
			justify-content: space-between;
			& .logoImg {
				width: 1.2rem;
				height: 0.56rem;
			}
			& .nav{
				display: flex;
				align-items: center;
			}
			& .nav-text {
				font-size: 0.2rem;
				margin-left: 0.66rem;
				line-height: 1;

				& a {
					color: #fff;
					&.hover {
						font-size: 0.24rem;
						border-bottom: 2px solid #ffecb3;
						padding: 2px 0;
					}
				}
			}
		}

		& .content {
			width: 11rem;
			position: absolute;
			top: 2rem;
			left: 50%;
			margin-left: -5.5rem;
			display: flex;
			flex-direction: column;
			align-items: center;

			& .imgtitle {
				width: 2.44rem;
				height: 0.52rem;
			}

			& .info {
				margin-top: 1rem;
				display: flex;


				& .info-item {
					width: 2.76rem;
					height: 1.48rem;
					background: url('./assets/contact-bg.png') no-repeat center;
					margin: 0 0.45rem;
					color: #06259e;
					line-height: 1;
					text-align: center;

					& .title {
						margin-top: 0.4rem;
						font-size: 0.24rem;
						font-weight: 700;
					}
					& .text {
						margin-top: 0.2rem;
						font-size: 0.20rem;
					}
				}
			}
		}
	}

			@media (width <= 830px) {
		.website-contact {
			& .header {
				width: 90%;
				margin-left: -45%;
				height: 0.84rem;

				& .logoImg {
					width: 1.74rem;
					height: 0.84rem;
				}

				& .nav-text {
					font-size: 0.23rem;
					margin-left: 0.58rem;
				}

				& .nav-text .hover {
					font-size: 0.3rem;
				}
			}

			& .content {
				top: 1.2rem;
				& .info {
					margin-top: 0.5rem;
					flex-direction: column;
					& .info-item {
						width: 4.33rem;
						height: 2.32rem;
						margin-bottom: 0.4rem;

						& .title {
							margin-top: 0.74rem;
							font-size: 0.34rem;
						}
						& .text {
							font-size: 0.28rem;
						}
					}
				}
			}
		}
	}
	</style>
	